<template>
  <div class="bbox">
    <div class="box">
      <div class="iconbox iconbox1">
        <el-icon class="el-icon1">
          <Avatar />
        </el-icon>
      </div>
      <div class="boxr">
        <p>学员数</p><span>360</span>
      </div>
    </div>
    <div class="box">
      <div class="iconbox iconbox2">
        <el-icon class="el-icon2">
          <Management />
        </el-icon>
      </div>

      <div class="boxr">
        <p>总课时</p><span>11,489</span>
      </div>
    </div>
    <div class="box">
      <div class="iconbox iconbox3">
        <el-icon class="el-icon3">
          <Opportunity />
        </el-icon>
      </div>

      <div class="boxr">
        <p>师资人数</p><span>36</span>
      </div>
    </div>
    <div class="box">
      <div class="iconbox iconbox4">

        <el-icon class="el-icon4">
          <WalletFilled />
        </el-icon>
      </div>
      <div class="boxr">
        <p>本月报名（万元）</p><span>25</span>
      </div>
    </div>
  </div>
  <div id="chart" style="width: 100%;height:800px;">
    <div id="date" style="width:66%;height:600px;">
      <el-calendar v-model="value" />
    </div>
    <div id="affiche" style="width: 30%;height:200px;">
      <h4>内部公告</h4>
      <el-table :data="affiche" border style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="handle" label="操作" />
      </el-table>
    </div>
    <div id="curve" style="width: 30%;height:200px;"></div>
    <div id="column" style="width: 30%;height:250px;"></div>
    <div id="pie" style="width: 66%;height:500px;"></div>

  </div>

</template>

<script>
import * as echarts from 'echarts'
import { ref } from 'vue'
export default {
  name: 'DashBoard',
  data() {
    return {
      myChart1: null,
      myChart2: null,
      myChart3: null,
      value: ref(new Date()),
      affiche: [
        {
          title: '新标题',
          handle: '操作'
        },
        {
          title: '新版上线公告',
          handle: '操作'
        }
      ]
    }
  },
  methods: {
    initChart1() {
      const colors = ['#5470C6']
      this.myChart1 = echarts.init(document.getElementById('curve'))
      // 指定图表的配置项和数据
      const option1 = {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Precipitation  ' +
                    params.value +
                    (params.seriesData.length ? ':' + params.seriesData[0].data : '')
                  )
                }
              }
            },
            // prettier-ignore
            data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09', '11-10', '11-11', '11-12']
          }
          // {
          //   type: 'category',
          //   axisTick: {
          //     alignWithLabel: true
          //   },
          //   axisLine: {
          //     onZero: false,
          //     lineStyle: {
          //       color: colors[0]
          //     }
          //   },
          //   axisPointer: {
          //     label: {
          //       formatter: function (params) {
          //         return (
          //           'Precipitation  ' +
          //           params.value +
          //           (params.seriesData.length ? ':' + params.seriesData[0].data : '')
          //         )
          //       }
          //     }
          //   },
          // prettier-ignore
          // data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
          // }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          // {
          //   name: 'Precipitation(2015)',
          //   type: 'line',
          //   xAxisIndex: 1,
          //   smooth: true,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [
          //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          //   ]
          // },
          {
            name: '本月报名统计',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              7989, 1, 24000, 16010, 12000, 1300, 48900, 17500, 13998, 990, 3609, 31200
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option1)
    },
    initChart2() {
      this.myChart2 = echarts.init(document.getElementById('column'))
      const option2 = {
        title: {
          text: '课程报名统计'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['跆拳道', '钢琴', '绘画', '篮球', '轮滑', '插画']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5000, 2000, 3600, 1000, 1000, 2000]
          }
        ]
      }
      this.myChart2.setOption(option2)
    },
    initChart3() {
      this.myChart3 = echarts.init(document.getElementById('pie'))
      const option3 = {
        title: {
          text: '课程',
          subtext: 'curriculum',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'right',
          top: 'bottom',
          data: [
            '钢琴',
            '柔道',
            '书法',
            '舞蹈',
            '篮球',
            '轮滑',
            '插画',
            '绘画'
          ]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['75%', '50%'],
            roseType: 'area',
            // itemStyle: {
            //   borderRadius: 5
            // },
            data: [
              { value: 30, name: '钢琴' },
              { value: 28, name: '柔道' },
              { value: 26, name: '书法' },
              { value: 24, name: '舞蹈' },
              { value: 22, name: '篮球' },
              { value: 20, name: '轮滑' },
              { value: 18, name: '插画' },
              { value: 16, name: '绘画' }
            ]
          }
        ]
      }
      this.myChart3.setOption(option3)
    }
  },
  mounted() {
    this.initChart1()
    this.initChart2()
    this.initChart3()
  }

}

</script>

<style lang="scss" scoped>
.bbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .iconbox {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    margin: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .iconbox1 {
    &:hover {
      background-color: #40c9c6;
    }

    .el-icon1 {
      color: #40c9c6;

      &:hover {
        color: #fff;
      }
    }
  }

  .iconbox2 {
    &:hover {
      background-color: #36a3f7;
    }

    .el-icon2 {
      color: #36a3f7;

      &:hover {
        color: #fff;
      }
    }
  }

  .iconbox3 {
    &:hover {
      background-color: #34bfa3;
    }

    .el-icon3 {
      color: #34bfa3;

      &:hover {
        color: #fff;
      }
    }
  }

  .iconbox4 {
    &:hover {
      background-color: #f4516c;
    }

    .el-icon4 {
      color: #f4516c;

      &:hover {
        color: #fff;
      }
    }
  }

  .el-icon {
    font-size: 75px;
  }

  .box {
    background-color: #fff;
    width: 23%;
    height: 108px;
    display: flex;
    justify-content: space-between;

    .boxr {
      padding: 20px;

      p {
        line-height: 18px;
        color: rgba(0, 0, 0, .45);
        font-size: 16px;
        font-weight: 900;
        margin-bottom: 12px;
      }

      span {
        font-size: 20px;
        font-weight: 900;
      }
    }
  }
}

#chart {

  #date {
    float: left;
  }

  #affiche {
    background-color: #fff;
    padding: 15px;
    float: right;
    margin-bottom: 20px;

    h4 {
      margin-bottom: 30px;
    }
  }

  #curve {
    background-color: #fff;
    padding: 15px;
    float: right;
    margin-bottom: 20px;
  }

  #column {
    background-color: #fff;
    padding: 15px;
    float: right;
  }
}

#pie {
  background-color: #fff;
  float: left;
  display: flex;
  overflow: hidden;

  :deep(div) {
    width: 60% !important;

  }

  :deep(canvas) {
    width: 165% !important;
    left: -110px !important;
  }
}
</style>
